<!-- Details.vue -->
<template>
	<div class="show-iframe">
		<div v-if="!mbBody.length">
			<div class="mb-body" v-if="detailInfo.goods_body"><div v-html="detailInfo.goods_body"></div></div>
			<div class="list-emptys" v-else><p>本商品暂无详情</p></div>
		</div>
		<div class="mb-body" v-else>
			<div v-for="(item, index) in mbBody" :key="index">
				<p v-if="item.type == 'text'">{{ item.value }}</p>
				<img v-else :src="item.value" v-on:click="setPopupVisible" />
			</div>
		</div>
	</div>
</template>

<script>
import $ from 'jquery'
export default {
  data () {
    return {}
  },
  computed: {
    getUrl: function () {
      return this.url
    }
  },
  props: ['mbBody', 'detailInfo'],
  methods: {
    // setPopupVisible () {
	//   this.$parent.shouSrc()
    // },
  },
  mounted () {
	var _this = this;
	console.log($(".mb-body").find("img"))
	$('.mb-body').find('img').click(function () {
		// console.log(this.src)
      _this.$parent.shouSrc(this.src);
	})
  }
}
</script>

<style lang="scss">
.show-iframe {
	height: 100%;
}

.list-emptys {
	// position: absolute;
	// top: 50%;
	// left: 50%;
	// transform: translate(-50%, -50%);
	width: 100%;
	padding: 40px 0;
	text-align: center;
	background: #ffffff;
	p {
		color: #7c7f88;
		font-size: 0.7rem;
		padding: 0;
		margin: 0;
		font-weight: normal;
		background: #ffffff;
	}
}
.mb-body {
	font-size: 0.7rem;
	img {
		max-width: 100%;
	}
}
</style>
